<script lang="ts" setup>
  import { onPageScroll } from '@dcloudio/uni-app'
  import { onMounted, ref, watch } from 'vue'
  const props = defineProps<{
    title: string  //默认值，
    isScroll:boolean,
  }>()
  import Back from '@/components/Back/Back.vue'
  /** 距离顶部距离 */
  const menuButtonInfo = ref({
    top: 0,
    bottom: 0,
    height: 0,
  })
  const titleBg = ref('transparent')
  const slotProps = ref(true)
  const pageScroll = (e: any) => {
    if (e.detail.scrollTop >= menuButtonInfo.value.height - 10) {
      titleBg.value = 'linear-gradient(180deg, #b5f5ec 100%, #f1f3f5 100%)'
    } else {
      titleBg.value = 'transparent'
    }
  }
  watch(
    () => props.isScroll,
    (newVal) => {
      console.log(props.isScroll)
    },
  )
  onMounted(() => {
    menuButtonInfo.value = uni.getMenuButtonBoundingClientRect()
  })
</script>

<template>
  <scroll-view style="height: calc(100vh - 1px)" :scroll-y="{isScroll}" @scroll="pageScroll" >
    <Back />
    <view class="top-bg" />
    <view
      class="title"
      :style="{
        background: titleBg,
        height: `${menuButtonInfo.top + menuButtonInfo.height}px`,
        'padding-top': `${menuButtonInfo.top}px`,
      }"
      >{{props.title}}</view
    >
    <view class="progress">
      <slot name="progress"></slot>
    </view>
    <view class="content" :style="{ marginTop: `${menuButtonInfo.bottom + 22}px` }">
      <slot name="content"></slot>
    </view>
    <slot name="button"></slot>
  </scroll-view>
</template>

<style lang="less">
  .top-bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 420rpx;
    background: linear-gradient(180deg, #b5f5ec 0%, #f1f3f5 100%);
  }

  .title {
    position: fixed;
    top: 0;
    z-index: 2;
    width: 100%;
    text-align: center;
    background: linear-gradient(180deg, #b5f5ec 100%, #f1f3f5 100%);
  }

  .progress {
    margin-top: 48rpx;
  }

  .content {
    padding: 32rpx;
    margin: 150rpx 32rpx 0;
    font-size: 32rpx;
    background: #fff;
    border-radius: 16px;

    .detection-text {
      font-size: 44rpx;
      font-weight: 600;
      color: #002329;
      text-align: center;

      .text {
        border-bottom: 12rpx solid #faad14;
      }
    }
  }
</style>
